<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增用户')" />
</head>
<body>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
    }
    .avatar {
        width: 100px;
        height: 100px;
        display: block;
    }
</style>
<div id="app_layer" v-cloak >
    <div class="main" v-loading="loading">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
            <el-input type="hidden" v-model="form.id"></el-input>
            <el-form-item prop="role_id" label="归属角色">
                <el-select v-model="form.role_id" placeholder="归属角色">
                    <el-option label="请选择归属角色" value=""></el-option>
                    <el-option :label="item.role_name" :value="item.id" v-for="(item,index) in role_list" :key="index"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="user_name" label="用户名：">
                <el-input v-model="form.user_name" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码：">
                <el-input v-model="form.password" placeholder="请输入密码，不修改勿填"></el-input>
                <span v-if="form.id">不修改勿填</span>
            </el-form-item>
            <el-form-item prop="status"  label="状态：">
                <el-radio v-model="form.status" :label="0">正常</el-radio>
                <el-radio v-model="form.status" :label="1">锁定</el-radio>
            </el-form-item>
            <el-form-item label="头像：">
                <el-upload
                        class="avatar-uploader"
                        action="/system/upload_pic"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
<!--            <el-form-item label="权限：">-->

<!--                <el-checkbox-group v-model="form.auth">-->
<!--                    <div v-for="(item,index) in nav_list" :key="index">-->
<!--                        <p><el-checkbox :label="item.auth_str">{{item.name}} <span v-if="item.is_nav==0">[权限]</span><span v-else>[导航]</span></el-checkbox></p>-->
<!--                        <el-checkbox v-for="(s,i) in item.child_list" :key="i" :label="s.auth_str">{{s.name}} <span v-if="s.is_nav==0">[权限]</span><span v-else>[导航]</span></el-checkbox>-->
<!--                        <el-divider></el-divider>-->
<!--                    </div>-->
<!--                </el-checkbox-group>-->

<!--            </el-form-item>-->
            <el-form-item>
                <el-button type="success" @click="onSubmit('form')">点击提交</el-button>
            </el-form-item>

        </el-form>
    </div>

</div>

<script>
    new Vue({
        el: '#app_layer',
        data(){
            return {
                loading:false,
                rules:{
                    role_id: [
                        {required: true, message: '请选择归属角色', trigger: 'blur'},
                    ],
                    user_name: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                    ],
                    status: [
                        {required: true, message: '请选择状态', trigger: 'change'},
                    ],
                },
                imageUrl:'',
                nav_list:[],
                role_list:[(${sysRoleList})],
                form:[(${sysUserJson})],
            }
        },
        mounted () {
            if(this.form.avatar!="") {
                this.imageUrl = "/uploads/" + this.form.avatar;
            }
        },
        methods: {
            onSubmit(formName) {
                let that = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        axios.post('/system/save_add_user',this.form).then(function (res){
                            that.loading = false;
                            let data = res.data;
                            if(data.code==false){
                                parent.vm.add_res(data.msg,'error');
                            }else{
                                parent.vm.add_res(data.msg,'success');
                                parent.drawer_layer_close();
                            }
                        }).catch(function(error){
                            that.loading = false;
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            handleAvatarSuccess(res, file) {
                if(res.code==false){
                    parent.vm.$message({
                        message: res.msg,
                        type: 'error'
                    });
                }else{
                    this.imageUrl = URL.createObjectURL(file.raw);
                    this.form.avatar = res.data;
                }
                console.log(res);
                console.log(this.form.avatar);
            },
        },
    });
</script>

</body>
</html>